
<template>
  <div class="auxiliary-segmentation-panel">
    <el-form label-width="80px" :model="data" size="small">
      <el-form-item label="分割类型">
        <el-radio-group v-model="data.segmentType">
          <el-radio label="line">分割线</el-radio>
          <el-radio label="blank">空白</el-radio>
        </el-radio-group>
      </el-form-item>

      <template v-if="data.segmentType === 'line'">
        <el-form-item label="线条样式">
          <el-radio-group v-model="data.lineStyle">
            <el-radio label="solid">实线</el-radio>
            <el-radio label="dashed">虚线</el-radio>
            <el-radio label="dotted">点线</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="线条颜色">
          <el-color-picker v-model="data.lineColor" />
        </el-form-item>
      </template>

      <el-form-item label="高度">
        <el-slider 
          v-model="data.height" 
          :min="1" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="内边距类型">
        <el-radio-group v-model="data.paddingType">
          <el-radio label="default">默认</el-radio>
          <el-radio label="custom">自定义</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item v-if="data.paddingType === 'custom'" label="水平边距">
        <el-slider 
          v-model="data.paddingHorizontal" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-divider>边距设置</el-divider>

      <el-form-item label="上边距">
        <el-slider 
          v-model="styles.marginTop" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="下边距">
        <el-slider 
          v-model="styles.marginBottom" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="左边距">
        <el-slider 
          v-model="styles.marginLeft" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="右边距">
        <el-slider 
          v-model="styles.marginRight" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['update:data', 'update:styles'])
</script>

<style lang="scss" scoped>
.auxiliary-segmentation-panel {
  padding: 10px;
}
</style>
